import React, { Component } from 'react'

export default class FlowerList extends Component {
    state = {flowers:[], like:[false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false], liked:[]}
    componentDidMount(){
        fetch('https://www.fastmock.site/mock/3c02a69b3952632e311022710cb48a6c/plant/getPlants')
            .then(res=>res.json())
            .then(res=>{
                this.setState({flowers:res.result.plantList})
            })
    }
    render() {
        const {flowers,like,liked} = this.state;
        var isLike = (index)=>{
            var like2 = like;
            var liked2 = liked;
            like2[index] = !like2[index];
            if(like2[index]){
                liked2.unshift(index)
            }
            this.setState({like: like2,liked:liked2});
        }
        var notLike = (index,index2)=>{
            var like2 = like;
            var liked2 = liked;
            like2[index] = !like2[index];
            liked2.splice(index2,1);
            this.setState({like: like2,liked:liked2});
        }
        return (
            <div>
                <h1>收藏列表</h1>
                <div>
                    {
                        liked.map((item,index)=><div key={item} style={{width:230, display:'flex',justifyContent:'space-between'}}>
                            <div style={{width:160}}>{flowers[item].name}</div>
                            <button onClick={()=>notLike(item,index)} style={{width:70}}>取消收藏</button>
                        </div>)
                    }
                </div>
                <h1>鲜花列表</h1>
                <div style={{display:'flex', justifyContent:'space-around', flexWrap:'wrap'}}>
                    {
                        flowers.map((flower,index)=><div key = {flower.plantID} style={{width:230, height: 230,marginTop:10,padding:10}}>
                            <img src={flower.coverURL} style={{width:160,height:120}} />
                            <p style={{width:180,margin:0}}>{flower.name}</p>
                            <p style={{width:180,margin:0}}>{flower.engName}</p>
                            <p style={{width:180,margin:0}}>产地: {flower.area=="" ? "未知产地" : flower.area}</p>
                            <button onClick={()=>isLike(index)}>{like[index] ? "已收藏" : "收藏"}</button>
                        </div>)
                    }
                </div>
            </div>
        )
    }
}
